<!DOCTYPE html> 
<html> 
<head> 
  <title>Mobile Book Catalog</title> 
  
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />

  <script type="text/javascript" src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0beta.js"></script>
  
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

  <script type="text/javascript" src="javascript/namespace.js"></script>
  <script type="text/javascript" src="javascript/modal.js"></script>
  <script type="text/javascript" src="javascript/database-localstorage.js"></script>
  
  <script type="text/javascript" src="javascript/bookdb.js"></script>
  <script type="text/javascript" src="javascript/database-websql.js"></script>
  <script type="text/javascript" src="javascript/settings.js"></script>
  
  <script type="text/javascript" src="javascript/core.js"></script>
  
  <script type="text/javascript" src="javascript/events.js"></script>
  
  <script type="text/javascript" src="javascript/bootstrap.js"></script>
  
  <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>

</head> 
<body> 

<div data-role="page" id="splash">
  <div data-role="content">  
    <img src="images/splash.jpg" alt="Splash" />
  </div>
</div><

<div data-role="page" id="loading">
  <div data-role="header"> 
    <h1>Loading</h1>
  </div> 
  <div data-role="content">  
    <ul data-role="listview" data-inset="true">
      <li>Label<span class="ui-li-count">123</span></li>
    </ul>
  </div>
</div><

<div data-role="page" id="home">
  <div data-role="header"> 
    <h1>Home</h1>
    <a href="#settings" data-role="button" data-icon="gear" class="ui-btn-right">Options</a> 
  </div> 
  <div data-role="content">  
    <ul data-role="listview" data-inset="true" >
      <li data-role="list-divider">Actions</li>
      <li><a href="#title">Title</a></li>
      <li><a href="#series">Series</a></li>
      <li><a href="#author">Author</a></li>
      <li><a href="#tags">Tags</a></li>
      <li><a href="#stars">Stars</a></li>
    </ul>
  </div><!-- /content -->
</div><!-- /page -->

<div data-role="page" id="settings">
  <div data-role="header"> 
    <h1>Settings</h1>
    <a href="#home" data-role="button" data-icon="delete">Cancel</a>
    <a href="#" data-role="button" data-icon="check" id="settings-save" data-theme="b">Save</a>
  </div> 
  <div data-role="content">  
    <div data-role="fieldcontain">
        <label for="bookXmlType">Book XML Type:</label>
        <select name="bookXmlType" id="bookXmlType">
          <option value="calibre-xml">Calibre XML</option>
        </select>
    </div>
    <div data-role="fieldcontain">
        <label for="bookXmlUrl">Book XML URL:</label>
        <input type="url" name="bookXmlUrl" id="bookXmlUrl" value=""  />
    </div>
    <div data-role="fieldcontain">
        <label for="bookXmlUrl">Last Imported URL:</label>
        <input type="text" name="lastImportedURL" id="lastImportedURL" value="" readonly="readonly"  />
    </div>
    <div data-role="fieldcontain">
        <label for="bookXmlUrl">Last Imported Time:</label>
        <input type="text" name="lastImportedURL" id="lastImportedTime" value="" readonly="readonly" />
    </div>
    <a href="#splash" id="reimportUrl" data-role="button" data-icon="gear">Reimport URL</a>
  </div><!-- /content -->
</div><!-- /page -->

<div data-role="page" id="title" data-add-back-btn="true">
  <div data-role="header"> 
    <h1>Title</h1> 
  </div> 
  <div data-role="content">  
    <ul data-role="listview" data-inset="true" data-filter="true" >
      <li data-role="list-divider">Books</li>
      <li data-role="list-divider">A</li>
      <li><a href="#">A Book</a></li>
      <li><a href="#">A Book 2</a></li>
      <li data-role="list-divider">B</li>
      <li data-role="list-divider">C</li>
      <li data-role="list-divider">D</li>
      <li data-role="list-divider">E</li>
      <li data-role="list-divider">F</li>
      <li data-role="list-divider">G</li>
      <li data-role="list-divider">H</li>
      <li data-role="list-divider">I</li>
    </ul>
  </div><!-- /content -->
</div><!-- /page -->

<div data-role="page" id="tags" data-add-back-btn="true">
  <div data-role="header"> 
    <h1>Tags</h1> 
  </div> 
  <div data-role="content">  
    <ul data-role="listview" data-inset="true" data-filter="true" >
    </ul>
  </div><!-- /content -->
</div><!-- /page -->

</body>
</html>
